<template>
    <!-- 项目部岗位-下拉框查询 -->
    <a-select
        :showSearch="true"
        optionFilterProp="children"
        filterOption
        v-bind="$attrs"
        v-on="$listeners"
        :placeholder="placeholder"
        v-model="currentValue"
        allowClear
    >
        <a-icon v-if="fetching" style="color: #096dd9" slot="suffixIcon" type="loading" />
        <a-spin v-if="fetching" slot="notFoundContent" size="small" />
        <a-select-option v-for="i in list" :key="i.id" :value="i.id">{{ i.name }}</a-select-option>
    </a-select>
</template>
<script>
import { getProjectJobsList } from '@/api/project/posts'
import { getPostManageList2 } from '@/api/system/system'
export default {
    name: 'Selector',
    data() {
        return {
            isCanClear: !this.isEdit, // 是否清除
            fetching: false,
            list: []
        }
    },
    props: {
        // v-model绑定的数据
        value: {
            type: [Array, String, Object]
        },
        // placeholder
        placeholder: {
            type: String,
            default: function () {
                return '请选择'
            }
        },
        // 联动表单值改变时是否清空当前表单值
        isClear: {
            type: Boolean,
            default: () => true
        },
        // 需要联动的表单名，
        // form: {
        //     type: Object,
        //     default: () => ({})
        // },
        // 项目orgID
        projectDeptId: {
            type: String,
            default: () => ''
        },
        // // value值名
        // valueName: {
        //     type: String,
        //     default: function () {
        //         return 'jobId'
        //     }
        // },
        //如果是编辑，第一次不要重置绑定的值。。。。
        isEdit: {
            type: Boolean,
            default: () => false
        }
    },
    computed: {
        // 转换绑定的选中数据，与v-model同步
        currentValue: {
            get: function () {
                return this.value
            },
            set: function (value) {
                this.$emit('input', value)
                this.$emit(
                    'update:option',
                    this.list.find((item) => item.id === value)
                )
                this.$emit(
                    'getOption',
                    this.list.find((item) => item.id === value)
                )
            }
        }
    },
    watch: {
        attr(val) {
            if (this.isClear && !this.isEdit) {
                this.currentValue = void 0
                this.$emit('resetSelf') // 在搜索组件(SearchData)中重置自身的值
            }
            // 清空表单
            if (this.isEdit && this.isCanClear) {
                this.currentValue = void 0
                this.$emit('resetSelf') // 在搜索组件(SearchData)中重置自身的值
            } else {
                this.isCanClear = true
            }
            // 重置列表
            this.list = []
            val && this.getJobList()
        },
        projectDeptId: {
            handler() {
                console.log(12)
                this.getJobList()
            }
        }
    },
    methods: {
        getJobList() {
            // 获取下拉框列表

            if (!this.projectDeptId) return
            this.fetching = true
            const params = {
                rootOrgId: this.projectDeptId
            }
            getPostManageList2(params)
                .then((res) => {
                    this.fetching = false
                    this.list = res.data
                    this.$emit('update:list', this.list)
                    this.$emit('getList', this.list)
                })
                .catch((res) => {
                    this.fetching = true
                })
        }
    }
}
</script>
